Angular Material এর মাধ্যমে ফর্ম তৈরি করা খুবই সহজ এবং একে শক্তিশালী ফর্ম ভ্যালিডেশন ফিচার দিয়ে সম্পন্ন করা যায়। Angular এর Reactive Forms এবং Template-driven Forms ব্যবহারের মাধ্যমে ইনপুট ফিল্ডের ভ্যালিডেশন করা যায়। Angular Material এর MatInputModule কম্পোনেন্ট ব্যবহার করে আপনি সহজেই ফর্ম ইনপুট তৈরি করতে পারেন, এবং এর সাথে বিভিন্ন ধরনের ভ্যালিডেশন যুক্ত করতে পারেন।

এখানে Angular Material ইনপুট ফিল্ডের সাথে ফর্ম ভ্যালিডেশন করার বিভিন্ন ধাপ এবং কৌশল বর্ণনা করা হলো।

১. ইনপুট ফিল্ডের সাথে ফর্ম ভ্যালিডেশন

Angular Material এর MatInputModule ব্যবহার করে ফর্ম ইনপুট তৈরি করা হয়। এই ইনপুট ফিল্ডগুলির সাথে বিভিন্ন ভ্যালিডেশন যেমন Required, MinLength, MaxLength, Pattern Matching ইত্যাদি যুক্ত করা যায়।

উদাহরণ: Template-driven Forms এর মাধ্যমে ইনপুট ফিল্ডের ভ্যালিডেশন

Angular Material ইনপুটের সাথে ভ্যালিডেশন ব্যবহার করতে FormsModule এবং MatInputModule ইনপোর্ট করতে হবে।

১.1. মডিউল ইনপোর্ট করা

import { NgModule } from '@angular/core';
import { MatInputModule } from '@angular/material/input';
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [MatInputModule, FormsModule],
})
export class AppModule {}

১.2. HTML ফর্ম তৈরি করা

<form #form="ngForm">
  <mat-form-field>
    <mat-label>Name</mat-label>
    <input matInput name="name" [(ngModel)]="name" required minlength="3" #name="ngModel">
    <mat-error *ngIf="name.invalid && (name.dirty || name.touched)">
      Name is required and must be at least 3 characters long.
    </mat-error>
  </mat-form-field>
  
  <mat-form-field>
    <mat-label>Email</mat-label>
    <input matInput name="email" [(ngModel)]="email" required email #email="ngModel">
    <mat-error *ngIf="email.invalid && (email.dirty || email.touched)">
      Please enter a valid email address.
    </mat-error>
  </mat-form-field>

  <button mat-raised-button [disabled]="form.invalid">Submit</button>
</form>

ভ্যালিডেশন ব্যাখ্যা:

• Required: ফিল্ডটি পূর্ণ করতে হবে।
• Minlength: কমপক্ষে ৩টি অক্ষর থাকা উচিত।
• Email: সঠিক ইমেইল ফরম্যাট হওয়া উচিত।

এখানে mat-error ব্যবহার করা হয়েছে, যা ফিল্ডের ভ্যালিডেশন ত্রুটি প্রদর্শন করবে যদি ইনপুটটি অবৈধ হয়।

২. Reactive Forms এর মাধ্যমে ইনপুট ফিল্ডের ভ্যালিডেশন

Reactive Forms ব্যবহার করে আরও শক্তিশালী এবং কাস্টম ভ্যালিডেশন যুক্ত করা যায়। এখানে FormGroup, FormControl এবং Validators ব্যবহার করা হয়।

উদাহরণ: Reactive Forms এর মাধ্যমে ইনপুট ফিল্ডের ভ্যালিডেশন

২.1. মডিউল ইনপোর্ট করা

import { NgModule } from '@angular/core';
import { MatInputModule } from '@angular/material/input';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [MatInputModule, ReactiveFormsModule],
})
export class AppModule {}

২.2. TypeScript ফাইল তৈরি করা

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(3)]],
      email: ['', [Validators.required, Validators.email]],
    });
  }

  get name() { return this.form.get('name'); }
  get email() { return this.form.get('email'); }

  onSubmit() {
    if (this.form.valid) {
      console.log('Form Submitted', this.form.value);
    }
  }
}

২.3. HTML ফর্ম তৈরি করা

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <mat-form-field>
    <mat-label>Name</mat-label>
    <input matInput formControlName="name">
    <mat-error *ngIf="name.invalid && (name.dirty || name.touched)">
      Name is required and must be at least 3 characters long.
    </mat-error>
  </mat-form-field>

  <mat-form-field>
    <mat-label>Email</mat-label>
    <input matInput formControlName="email">
    <mat-error *ngIf="email.invalid && (email.dirty || email.touched)">
      Please enter a valid email address.
    </mat-error>
  </mat-form-field>

  <button mat-raised-button type="submit" [disabled]="form.invalid">Submit</button>
</form>

ভ্যালিডেশন ব্যাখ্যা:

• Reactive Forms এ FormControl ব্যবহার করে ফিল্ডের ভ্যালিডেশন নির্ধারণ করা হয়।
• Validators এর মাধ্যমে বিভিন্ন ভ্যালিডেশন শর্ত যেমন required, minlength, email ইত্যাদি দেওয়া হয়।

এখানে mat-error ব্যবহার করা হয়েছে, যা ইনপুটের ভুল বা অবৈধ স্টেট শনাক্ত করলে ত্রুটি বার্তা প্রদর্শন করে।

৩. কাস্টম ভ্যালিডেশন

Angular Material এর সাথে কাস্টম ভ্যালিডেশনও ব্যবহার করা যেতে পারে, যেমন ফিল্ডের মানের উপর ভিত্তি করে ডাইনামিক ভ্যালিডেশন তৈরি করা।

উদাহরণ: কাস্টম ভ্যালিডেটর তৈরি

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

export function customValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const forbidden = /admin/.test(control.value);
    return forbidden ? { 'forbiddenName': { value: control.value } } : null;
  };
}

এখন এই কাস্টম ভ্যালিডেটরটি ইনপুট ফিল্ডে ব্যবহার করতে পারেন:

this.form = this.fb.group({
  username: ['', [Validators.required, customValidator()]]
});

Angular Material এর মাধ্যমে ইনপুট ফিল্ডের সাথে ফর্ম ভ্যালিডেশন করা খুবই সহজ এবং কার্যকরী। আপনি Template-driven Forms অথবা Reactive Forms ব্যবহার করে ফর্মের ভ্যালিডেশন করতে পারেন। Angular এর বিল্ট-ইন Validators এর পাশাপাশি কাস্টম ভ্যালিডেটর ব্যবহার করে আরও উন্নত ফর্ম ভ্যালিডেশন তৈরি করা সম্ভব। Angular Material এর কম্পোনেন্ট যেমন MatInputModule, MatFormFieldModule, এবং MatErrorModule এর মাধ্যমে ফর্মকে আকর্ষণীয় এবং ব্যবহারকারী-বান্ধব করা যায়।